<!DOCTYPE html>
<html lang="en" class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>站务流水查看</title>
    <header th:replace="header::html"></header>
</head>

<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a><cite>首页</cite></a>
            <a><cite>系统配置</cite></a>
            <a><cite>站务流水列表</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

<div class="layui-fluid">
    <div class="layui-row  layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form  layui-col-space5">

                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="stype" placeholder="请输入流水详情或其关键字" autocomplete="off"
                                   class="layui-input">
                        </div>

                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="test20" placeholder="请选择开始时间"
                                       name="startDate">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="test21" placeholder="请选择结束时间"
                                       name="endDate">
                            </div>
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button type="button" class="layui-btn layui-btn-fluid" onclick="checkBank()">查看门户账户情况
                            </button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-hide" id="stationFlow" lay-filter="stationFlow"></table>
                </div>

                <div class="layui-card-body ">
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
                        >删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="msg2">
    <table id="table2" lay-filter="test3"></table>
</script>
<script>
	layui.use('laydate', function () {
		var laydate = layui.laydate;
		//选中后的回调
		laydate.render({
			elem: '#test20'
			, done: function (value, date) {
				layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
			}
		});

		laydate.render({
			elem: '#test21'
			, done: function (value, date) {
				layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
			}
		});
	});


	layui.use('table', function () {
		var table = layui.table,
			form = layui.form;
		table.render({
			elem: '#stationFlow'
			, url: '/api-back/stationFlow/list' //数据接口
			, page: true //开启分页
			, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			, response: {
				dataName: 'datas' //规定数据列表的字段名称，默认：data
			}
			, cols: [
				[ //表头
					{type: 'checkbox', fixed: 'left'},
					{title: '序号', type: 'numbers', width: '5%'}
					, {field: 'sid', title: 'ID', align: 'center', sort: true, width: "5%", style: 'display:none;'}
					, {field: 'stype', title: '流水详情', align: 'center'}
					, {field: 'stotalmoney', title: '流水总额', align: 'center', sort: true, width: "5%"}
					, {field: 'stime', title: '发生时间', align: 'center'}
					, {field: 'sgetmoney', title: '平台获利', align: 'center'}
					, {field: 'receiveaccount', title: '获利账号', align: 'center'}
					, {field: 'sendaccount', title: '支出账号', align: 'center', width: "5%"}
					, {title: '操作', toolbar: '#barDemo', align: 'center'}
				]
			],
			done: function () {
				//checkPermission();
				$('table.layui-table thead tr th:eq(2)').addClass('layui-hide');//隐藏第一列的表头
			}
		});


		//监听工具条
		table.on('tool(stationFlow)', function (obj) {
			var data = obj.data;//获取点击行数据
			if (obj.event === 'del') {
				layer.confirm('确认删除该条流水吗?（WARMING:删除可能导致流水总金额和账户金额无法对上，请先核实金额后再删除！）', function (index) {
					$.ajax({
						url: "/api-back/stationFlow/delete",
						type: "GET",
						data: {sid: data.sid},
						dataType: 'json',
						success: function (result) {
							layer.alert("删除成功", {icon: 1}, function (index1) {
								layer.close(index1);
								table.reload('stationFlow');
								$('table.layui-table thead tr th:eq(2)').addClass('layui-hide');//隐藏第一列的表头
							});
						},
					});
				});
			}
		});

		//搜索
		form.on('submit(search)', function (data) {
			var data = data.field;
			table.render({
				elem: '#stationFlow'
				, url: '/api-back/stationFlow/findFlowByFuzzy' //数据接口
				, page: true //开启分页
				, where: {
					"stype": data.stype,
					"startTime": data.startDate,
					"endTime": data.endDate
				}
				, response: {
					countName: 'count', //规定数据总数的字段名称，默认：count
					dataName: 'datas' //规定数据列表的字段名称，默认：data
				}
				, cols: [
					[ //表头
						{type: 'checkbox', fixed: 'left'},
						{title: '序号', type: 'numbers', width: '5%'}
						, {field: 'sid', title: 'ID', align: 'center', sort: true, width: "5%", style: 'display:none;'}
						, {field: 'stype', title: '流水详情', align: 'center'}
						, {field: 'stotalmoney', title: '流水总额', align: 'center', sort: true, width: "5%"}
						, {field: 'stime', title: '发生时间', align: 'center'}
						, {field: 'sgetmoney', title: '平台获利', align: 'center'}
						, {field: 'receiveaccount', title: '获利账号', align: 'center'}
						, {field: 'sendaccount', title: '支出账号', align: 'center', width: "5%"}
						, {title: '操作', toolbar: '#barDemo', align: 'center'}
					]
				],
				done: function () {
					//checkPermission();
					$('table.layui-table thead tr th:eq(2)').addClass('layui-hide');//隐藏第一列的表头
				}
			});
			return false;
		});
		//checkPermission();
	});

	function checkBank() {
		layui.use('table', function () {
			var table2 = layui.table;
			var str = layer.open({
				type: 1,
				content: $('#msg2').html(),
				area: ['1000px', '500px'],
				title: '门户账户详情',
				btn: ['返回'],
				success: function () {
					table2.render({
						elem: $('#table2')
						, type: 'POST'
						, url: '/api-back/stationFlow/getBankPage'
						, page: true
						, response: {
							countName: 'count', //规定数据总数的字段名称，默认：count
							dataName: 'datas' //规定数据列表的字段名称，默认：data
						}
						, cols: [
							[ //表头
								{type: 'checkbox', fixed: 'left'},
								{title: '序号', type: 'numbers', width: '5%'}
								, {field: 'bid', title: 'ID', align: 'center', width: "5%", hide:'true'}
								, {field: 'bname', title: '账户名称', align: 'center', width: "15%"}
								, {field: 'baccount', title: '账户账号', align: 'center', sort: true,width: "15%"}
								, {field: 'bmoney', title: '余额', align: 'center'}
							]
						],
						done: function () {
							//checkPermission();
						}
					});
				}
			});
		});
	}

</script>

</html>